<template>
  <view class="search-container px-2 box-border">
    <view class="custom-search mt-2.5 flex flex-row items-center">
      <up-input
        v-model="keyWord"
        color="#000"
        placeholder="搜索关键词"
        :placeholderStyle="{ color: '#BBBBBB', fontSize: '31rpx' }"
        prefixIcon="search"
        prefixIconStyle="font-size: 50rpx;color: #BBBBBB;"
        shape="circle"
        border="surround"
        clearable
        :focus="true"
        @confirm="search"
        @clear="showSearchResult = false"
      >
        <template #suffix>
          <view class="flex flex-row items-center">
            <view class="left-line mr-2"></view>
            <text class="text-[31rpx] text-[#038afe] mr-[40rpx]" @click="search"
              >搜索</text
            >
          </view>
        </template>
      </up-input>
      <view class="text-black text-[31rpx] ml-2" @click="resetData">取消</view>
    </view>
    <template v-if="showSearchResult">
      <view class="flex flex-row justify-between items-center mt-2">
        <text>搜索结果{{ searchResult.length }}个：</text>
      </view>
      <view class="divider-line my-2"></view>
      <view class="flex flex-wrap" v-if="searchResult.length">
        <view
          class="bg-[#E6E6E6] rounded-1 text-black text-[29rpx] text-center py-1 px-3 box-border mr-2 mb-2"
          v-for="(item, index) in searchResult"
          :key="index"
          @click="scanDetail(item)"
          >{{ item.itemName }}</view
        >
      </view>
    </template>
    <template v-else>
      <view class="flex flex-row justify-between items-center mt-2">
        <text>历史搜索</text>
        <button
          v-if="searchStore.hisList.length"
          plain="true"
          class="clear-btn btn-normal mr-0"
          @click="searchStore.clearHistory"
        >
          清空
        </button>
      </view>
      <view class="divider-line my-2"></view>
      <view class="flex flex-wrap" v-if="searchStore.hisList.length">
        <view
          class="bg-[#E6E6E6] rounded-1 text-black text-[29rpx] text-center py-1 px-3 box-border mr-2 mb-2"
          v-for="(item, index) in searchStore.hisList"
          :key="index"
          @click="searchHistory(item)"
          >{{ item }}</view
        >
      </view>
      <view
        v-else
        class="text-black text-[29rpx] flex justify-center items-center text-center mt-[10vh]"
      >
        <text>暂无搜索记录~</text>
      </view>
    </template>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import { searchWorkGuide } from "@/api/workGuide/index";
import { useSearchStore } from "@/stores/search";
const searchStore = useSearchStore();

const keyWord = ref("");
const uToastRef = <any>ref(null);
const showSearchResult = ref(false);
const searchResult = ref<any>([]);

// 搜索
const search = () => {
  if (keyWord.value) {
    searchWorkGuide({ keyWord: keyWord.value })
      .then((res: any) => {
        const { data } = res;
        searchStore.setHistory([
          keyWord.value,
          ...searchStore.hisList.filter(
            (item: string) => item != keyWord.value
          ),
        ]);
        searchResult.value = data ?? [];
        showSearchResult.value = true;
      })
      .catch((err: any) => {
        uToastRef.value.show({
          type: "error",
          message: err,
        });
      });
  } else {
    uToastRef.value.show({
      type: "warning",
      message: "请输入搜索关键词",
    });
  }
};
// 查看详情
const scanDetail = (item: any) => {
  uni.navigateTo({
    url: `/subPages/crowd/workGuide/detail?id=${item.id}`,
  });
};
// 取消
const resetData = () => {
  keyWord.value = "";
  showSearchResult.value = false;
  uni.navigateBack({
    delta: 1,
  });
};
// 按照历史搜索记录搜索
const searchHistory = (item: any) => {
  keyWord.value = item;
  search();
};

onShow(() => {
  keyWord.value = "";
  showSearchResult.value = false;
});
</script>

<style lang="scss" scoped>
.search-container {
  .custom-search {
    ::v-deep .u-input {
      background: #fff;
      border: 1rpx solid #bbbbbb;
      padding-right: 0 !important;
    }
  }
  .left-line {
    height: 42rpx;
    border-left: 1rpx solid #707070;
  }
  .divider-line {
    width: 100%;
    border-top: 0.7rpx solid #bbbbbb;
  }

  .clear-btn {
    border: 1rpx solid #038afe;
    color: #038afe;
    border-radius: 36rpx;
  }
}
</style>
